<template>
  <div class="main">
    <div class="wrap">
      <div class="label">
        <label>姓名</label>
      </div>
      <div class="insert">
        <input type="text" v-model="name" placeholder="请输入您的姓名">
      </div>
    </div>
    <div class="wrap">
      <div class="label">
        <label>电话</label>
      </div>
      <div class="insert">
        <input type="text" v-model="mobile" placeholder="请输入您的电话">
      </div>
    </div>
    <div class="wrap">
      <div class="label">
        <label>邀请码（非必填）</label>
      </div>
      <div class="insert">
        <input type="text" v-model="invite_code" placeholder="请输入您的邀请码">
      </div>
    </div>
    <div class="wrap">
      <div class="label">
        <label>备注</label>
      </div>
      <div class="insert">
        <textarea placeholder="请输入您的备注" rows="6" v-model="remarks"></textarea>
      </div>
    </div>

    <div class="footer">
      <button type="button" class="foot-btn" @click="handleSubmit">提交信息</button>
    </div>
  </div>
</template>

<script>
import api from "../../api";
import common from '../../api/common'
import ActionButton from "@/components/common/ActionButton";
const IsPhone = /^1[345789]\d{9}$/;

export default {
  title: '申请入股',
  components: {
    ActionButton
  },
  data() {
    return {
      uid: this.$store.state.uid,
      name: "",
      mobile: "",
      invite_code: "",
      remarks: ""
    };
  },
  methods: {
    handleSubmit() {
      if (!this.name) {
        this.$toast("请输入姓名");
        return;
      }
      if (!this.mobile) {
        this.$toast("请输入手机号码");
        return;
      }
      if (!IsPhone.test(this.mobile)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      let that = this;
      api.usercenter.applyProfit(
        this.uid,
        this.name,
        this.mobile,
        this.invite_code,
        this.remarks,
        res => {
          this.$toast.success({
            message: `提交成功`,
            position: "middle",
            duration: 2000,
            onClose() {
              that.$routerPush(that, `/pages/mine/Index`);
            }
          });
        }
      );
    }
  },
  mounted () {
    var shareCode = common.getParam('shareCode');
    if (shareCode) {
      this.invite_code = shareCode
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 5vw;
  .wrap {
    margin-bottom: 5vw;
    .label {
      font-size: 3.8vw;
      margin-bottom: 2vw;
      label:after {
        content: "：";
      }
    }
    input[type="text"],
    textarea {
      width: 100%;
      border: 1px solid #f2f2f2;
      resize: none;
      padding: 2.5vw 1vw;
      font-size: 3.5vw;
    }
  }
  .footer {
    position: fixed;
    width: 100vw;
    bottom: 0;
    left: 0;
  }
  .foot-btn {
    width: 100%;
    border: 0;
    outline: none;
    position: fixed;
    bottom: 0;
    background: #008fef;
    color: #fff;
    font-size: 4vw;
    padding: 3vw 0;
  }
}
</style>